<template>
  <el-form
    ref="ruleFormRef"
    :model="formInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12">
        <el-form-item label="菜单名称" prop="title">
          <el-input
            v-model="formInline.title"
            clearable
            placeholder="请输入菜单名称"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="formInline.type">
            <el-radio :label="1">目录</el-radio>
            <el-radio :label="2">菜单</el-radio>
            <el-radio :label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="路由地址" prop="path">
          <el-input
            v-model="formInline.path"
            clearable
            placeholder="请输入路由地址"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" v-if="formInline.type !== 3">
        <el-form-item label="组件路径" prop="component">
          <el-input
            v-model="formInline.component"
            clearable
            placeholder="请输入组件路径"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="权限标识" prop="permission">
          <el-input
            v-model="formInline.permission"
            clearable
            placeholder="请输入权限标识"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="菜单图标" prop="icon">
          <el-input
            v-model="formInline.icon"
            clearable
            placeholder="请输入菜单图标"
          >
            <template #prefix>
              <i :class="formInline.icon" v-if="formInline.icon" />
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="显示排序" prop="sort">
          <el-input-number
            v-model="formInline.sort"
            :min="0"
            :max="999"
            controls-position="right"
            placeholder="显示排序"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="菜单状态" prop="status">
          <el-radio-group v-model="formInline.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" v-if="formInline.type !== 3">
        <el-form-item label="是否显示" prop="visible">
          <el-radio-group v-model="formInline.visible">
            <el-radio :label="true">显示</el-radio>
            <el-radio :label="false">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" v-if="formInline.type === 2">
        <el-form-item label="是否缓存" prop="keepAlive">
          <el-radio-group v-model="formInline.keepAlive">
            <el-radio :label="true">缓存</el-radio>
            <el-radio :label="false">不缓存</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :xs="24">
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formInline.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormRules } from "element-plus";
import { type MenuFormProps } from "./utils/types";

const props = withDefaults(defineProps<MenuFormProps>(), {
  formInline: () => ({
    id: null,
    parentId: 0,
    title: "",
    path: "",
    component: "",
    icon: "",
    permission: "",
    type: 1,
    status: 1,
    sort: 0,
    visible: true,
    keepAlive: false,
    remark: ""
  })
});

const ruleFormRef = ref();
const formInline = reactive(props.formInline);

const formRules = reactive(<FormRules>{
  title: [{ required: true, message: "菜单名称为必填项", trigger: "blur" }],
  type: [{ required: true, message: "菜单类型为必选项", trigger: "change" }],
  sort: [{ required: true, message: "显示排序为必填项", trigger: "blur" }]
});

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
